<template>
  <div class="popupPanel">
    <div class="rt">
      <div class="level" :class="getStyle(info.level)">{{getTxt(info.level)}}</div>
      <div class="close" @click="$emit('hidePopup')">×</div>
    </div>
    <div class="item">
      <div class="name">名称:</div>
      <div class="value">{{info.name}}</div>
    </div>
    <div class="item">
      <div class="name">编号:</div>
      <div class="value">{{info.num}}</div>
    </div>
    <div v-for="(item, index) in info.monitorItems" :key="index">
      <div class="item" :class="getStyle(item.itemValue>item.threshold3?3:item.itemValue>item.threshold2?2:item.itemValue>item.threshold1?1:0)">
        <div class="name">{{item.itemName}}:</div>
        <div class="value">{{item.itemValue==null?"-":item.itemValue + item.itemUnit}}</div>
      </div>
      <div v-if="(item.itemValue>item.threshold3?3:item.itemValue>item.threshold2?2:item.itemValue>item.threshold1?1:0)>0" class="item">
        <div class="name">告警级别:</div>
        <div class="value">{{item.itemValue>item.threshold3?3:item.itemValue>item.threshold2?2:item.itemValue>item.threshold1?1:0}}</div>
      </div>
      <div v-if="(item.itemValue>item.threshold3?3:item.itemValue>item.threshold2?2:item.itemValue>item.threshold1?1:0)>0" class="item">
        <div class="name">告警阈值:</div>
        <div class="value">{{item.itemValue>item.threshold3?item.threshold3:item.itemValue>item.threshold2?item.threshold2:item.threshold1}}</div>
      </div>
    </div>
		<div class="item">
			<div class="name">监测内容:</div>
			<div class="value">{{info.monitor}}</div>
		</div>
		<div class="item">
			<div class="name">位置:</div>
			<div class="value">{{info.postr}}</div>
		</div>
		<div class="item">
			<div class="name">时间:</div>
			<div class="value">{{info.time}}</div>
		</div>
		<div class="align-r">
			<span class="tomore" @click="handleReview">查看详情<i class="el-icon-d-arrow-right el-icon--right"></i> </span>
		</div>
	</div>
</template>

<script>

  export default {
    name: "popupPanel",
    components: {},
    props: {
      info: {
        type: Object,
        default: () => ({})
      }
    },
    data() {
      return {};
    },
    watch: {},
    computed: {},
    methods: {
      getStyle(level) {
        let ret = "";
        switch (level) {
          case 0:
            ret = "green";
            break;
          case 1:
            ret = "color-blue";
            break;
          case 2:
            ret = "color-yellow";
            break;
          case 3:
            ret = "color-red";
            break;
          case 4:
            ret = "gray";
            break;
          case 5:
            ret = "dusty-blue";
            break;
          default:
            break;
        }
        return ret;
      },
      getTxt(level) {
        let ret = "";
        switch (level) {
          case 0:
            ret = "正常";
            break;
          case 1:
            ret = "一级预警";
            break;
          case 2:
            ret = "二级预警";
            break;
          case 3:
            ret = "三级预警";
            break;
          case 4:
            ret = "离线";
            break;
          case 5:
            ret = "维护";
            break;
          default:
            break;
        }
        return ret;
      },
      handleReview() {
        this.$emit("review");
      }
    },
    created() {},
    mounted() {}
  };
</script>
<style lang="scss" scoped>

  .green {
		color: #64c797 !important;
	}
	.dusty-blue {
		color: rgb(178, 203, 231) !important;
	}
	.gray {
		color: rgb(177, 177, 177) !important;
	}

  .color-grey {
    color: black!important;
  }
  .popupPanel {
    position: relative;
    z-index: 1;
    background-color: #fff;
    border-radius: 4px;
    width: 300px;
    line-height: 20px;
    font-size: 12px;
    padding: 10px;

    .item {
      display: flex;
      color: #323232;

      .name {
        width: 60px;
        font-weight: bold;
        color: #333;
      }
    }

    .rt {
      position: absolute;
      display: flex;
      right: 3px;
      top: 3px;

      .level {
        color: #14d214;
      }

      .close {
        margin-left: 5px;
        font-size: 32px;
        cursor: pointer;
        color: #666;
      }
    }
  }
</style>
